<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
				/* 练习：1 圆形 2 正三角形
				 思路1：宽高与边框倒角一致	 
				 */
				div#cirle{
					width: 400px;
					height: 400px;
					border: 1px solid red;
					border-radius: 50%;
					/* 边框阴影 box-shadow 属性 */
					box-shadow: 5px 5px 50px 50px red inset;
				}
				/* 思路2：div#triangle
				           css中：抓到div    【斜线】
				            左边框  50像素实线红色
				            右边框  50像素实线黄色
							下边框  50像素实线黑色
					注意：先别加宽高 transparent	透明色 */
					div#triangle{
						width: 0;
						/* border-left: 50px solid transparent;
						border-right: 50px solid transparent;
						border-bottom: 50px solid black; */
						/* 两行：倒三角，蓝色，透明度：.3
						 提醒：所有边框：50px solid transparent
						     上边框颜色改成蓝色 0，0，255
						 */
						border: 50px solid transparent;
						border-top-color: rgba(0,0,255,.3);
					}
					/* outline  边框轮廓 只针对input 元素*/
					input{
						outline: 1px solid red;
					}
					 /* 实际应用：通配选择器 去掉轮廓
					  *{ outline：0;}
							  
					*/
			</style>
	</head>
	<body>
		<div id="cirle"></div>
		<div id="triangle"></div>
		边框：<input type="text">
	</body>
</html>